<template>
  <div class="directivebox">
    <div>自定义指令 directive</div>
    <input type="text" />
    <input type="text" />
    <input type="text" v-focus1="'focuse1111'" />
    <input type="text" v-focus2="45" />
    <input type="text" />

    <div>
      <h2>测试短信验证码</h2>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    //函数形式写法
    focus1(el, binding) {
      console.log(el, binding);
      el.value = binding.value;
    },
    //对象选项写法
    focus2: {
      mounted(el, binding) {
        console.log('el, binding', el, binding);
        el.value = binding.value;
        el.focus();
      }
    }
  },
  setup() {
    function httpAction() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve('request completed 3s');
        }, 3000);
      });
      return p;
    }
    function httpErrAction() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(() => {
          reject('request failed 4s');
          //   resolve('request success 4s');
        }, 4000);
      });
      return p;
    }

    function testApi() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve('接口请求超过2秒');
        }, 2000);
      });
      return p;
    }

    // 全部成功才返回结果
    // Promise.all([httpAction(), httpErrAction(), testApi()])
    //   .then((res) => {
    //     console.log('promis All', res);
    //   })
    //   .catch((err) => {
    //     console.log('err ProisAll', err);
    //   });

    // 谁最先执行
    // Promise.race([httpAction(), httpErrAction(), testApi()])
    //   .then((res) => {
    //     console.log('promis All', res);
    //   })
    //   .catch((err) => {
    //     console.log('err ProisAll', err);
    //   });

    //等所有实例都返回结果，不管成功失败  都会then
    // Promise.allSettled([httpAction(), httpErrAction(), testApi()])
    //   .then((res) => {
    //     console.log('promis All', res);
    //   })
    //   .catch((err) => {
    //     console.log('err ProisAll', err);
    //   });

    let rr1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve(1111);
      }, 1000);
    });

    let rr2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve(2222);
      }, 2000);
    });

    const TestAsync = async () => {
      //异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise
      await rr2.then((res) => console.log(res));
      console.log('----------');
      await rr1.then((res) => console.log(res));
    };
    TestAsync();
  }
};
</script>

<style lang="scss" scoped>
.directivebox {
  padding: 16px;
}
</style>
